<!-- 区域健康度告警详情分析 -->
<template>
  <div class="ywgzt-container">
    <title-banner :title="'区域健康度告警详情分析'"></title-banner>
    <div class="content">
      <div class="overview-box">
        <el-row style="margin-bottom: 15px;">
          <el-col :span="4">
            <span class="overview-label">区域名称：</span> {{detailInfo.areaName}}
          </el-col>
          <el-col :span="5">
            <span class="overview-label">健康度告警次数：</span> {{detailInfo.alarmNum || 0}}
          </el-col>
          <el-col :span="4">
            <span class="overview-label">健康度：</span> {{detailInfo.healthRate || 0}}%
          </el-col>
          <el-col :span="5">
            <span class="overview-label">最早告警时间：</span> {{newMinAlarmTime }}
          </el-col>
          <el-col :span="5">
            <span class="overview-label">最新告警时间：</span> {{newMaxAlarmTime}}
          </el-col>
        </el-row>
        <el-row  style="margin-bottom: 15px;">
          <el-col :span="4">
            <span class="overview-label">总访问量：</span> {{detailInfo.count || 0}}
          </el-col>
          <el-col :span="5">
            <span class="overview-label">响应慢访问量：</span> {{detailInfo.dealTimeAlarmCount || 0}}
          </el-col>
          <el-col :span="4">
            <span class="overview-label">告警访问量：</span> {{detailInfo.alarmCount || 0}}
          </el-col>
          <el-col :span="5">
            <span class="overview-label">失败访问量：</span> {{detailInfo.failCount || 0}}
          </el-col>
          <el-col :span="5">
            <span class="overview-label">当前告警时间：</span> {{newCycleTime}}
          </el-col>
        </el-row>
<!--        <el-row>
          <el-col :span="4">
            <span class="overview-label">告警类型：</span> {{detailInfo.alarmTypeStr}}
          </el-col>
        </el-row>-->
      </div>
      <div class="table-box">
        <div class="table-title">
          <div class="circle"></div> {{detailInfo.areaName}}-全系统总览
          <div class="table-export-btn">
            <el-button type="text" :loading="exportLoading.allSys" @click="handleSysExport">
              <svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
            </el-button>
          </div>
        </div>
        <div>
          <sysTableList
            :params="responseParams"
            ref="syslistRef"
            @getSysInfo="getSysInfo"
            v-if="sysShow"
          ></sysTableList>
        </div>
      </div>
      <div class="table-box">
        <div class="table-title">
          <div class="circle"></div>
          {{detailInfo.areaName}}-{{businessInfo.systemName}}-全业务总览
          <div class="table-export-btn">
            <el-button type="text" :loading="exportLoading.allBusi" @click="handleBusiExport">
              <svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
            </el-button>
          </div>
        </div>
        <div>
          <businesssTableList
            :params="businessParams"
            ref="businesssRef"
            v-if="sysShow"
            @getBusinessInfo="getBusinessInfo"
          ></businesssTableList>
        </div>
      </div>
      <div class="table-box" v-if="is_gaojingshow">
        <div class="table-title">
          <div class="circle"></div>关联告警列表
          <div class="table-export-btn">
            <el-button type="text" :loading="exportLoading.relatAlarm" @click="handleRelatExport">
              <svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
            </el-button>
          </div>
        </div>
        <el-row style="height: 45px;line-height: 32px; padding-left: 20px;">
          <el-col :span="4">
            <span class="searchTitle">
              系统名称: <span :title="businessInfo.systemName">{{businessInfo.systemName}}</span>
            </span>
          </el-col>
          <el-col :span="4">
            <span class="searchTitle">
              业务名称: <span :title="businessInfo.businessName">{{businessInfo.businessName}}</span>
            </span>
          </el-col>
          <el-col :span="10">
            <div class="analysis-time-box">
              <span class="analysis-time-label">时间范围</span>
              <el-date-picker
                v-model="alarmTimeRange"
                size="small"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :clearable="false"
                class="date-picker"
                value-format="YYYY-MM-DD HH:mm:00"
                :disabled-date="disabledDate"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
        <div class="analysis-time-box">
          <el-link
            v-for="item in alarmOptions"
            :key="item.alarmId"
            :underline="false"
            :class="alarmId == item.alarmId ? 'active-domain' : 'unActive-domain' "
            @click="handleSearchAlarm(item.alarmId)"
          >{{item.name}}</el-link>
        </div>
        <!-- 数据列表 -->
        <yd-table
          :formData="extendData"
          :tableConfig="tableConfig"
          :tableData="tableData"
          @sizeChangeHandler="handlerSearch"
          @currentChangeHandler="handlerSearch"
          @sortChangeHandler="handlerSearch"
        ></yd-table>
      </div>

      <div class="table-box" v-if="!is_gaojingshow">
        <div class="table-title">
          <div class="circle"></div>
          {{detailInfo.areaName}}-{{businessInfo.systemName}}-{{businessInfo.businessName}}-
          <span v-if="tableConfig1Type =='1'">失败详单列表</span>
          <span v-if="tableConfig1Type =='2'">告警详单列表</span>
          <div class="table-export-btn">
            <el-button type="text" :loading="exportLoading.allBusi1" @click="handleBusiExport1">
              <svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
            </el-button>
          </div>
        </div>
        <yd-table
          :formData="extendData1"
          :tableConfig="tableConfig1"
          :tableData="tableData1"
          @sizeChangeHandler="handlerSearch1"
          @currentChangeHandler="handlerSearch1"
          @sortChangeHandler="handlerSearch1"
        ></yd-table>
      </div>
    </div>
  </div>
</template>

<script setup name="AlarmAnalysisDetail" lang="tsx">
import TitleBanner from "@/views/ops-workbench/components/TitleBanner/index.vue";
import { formatDate } from "@/utils/common";
import { downloadFromBlob, toDecimalFormate } from "@/utils/common";
import {
  queryDetail,
  exportSystemOverview,
  exportBusiOverview,
  queryAlarmDetailList,
  alarmDetailListQueryExport,
  alarmTypeToBusinessList,
  alarmTypeToBusinessListExport,
} from "@/api/ops-workbench/area-health/alarmAnalysisDetail";
import SysTableList from "./sysList.vue";
import BusinesssTableList from "./businesssList.vue";
import useCurrentInstance from '@/utils/useCurrentInstance';
import { useRoute, useRouter } from "vue-router";
import { ref, reactive, watch, toRaw } from "vue";

const { proxy } = useCurrentInstance();
const route = useRoute();
const router = useRouter();

const props = defineProps({
  params: {
    type: Object,
    default: {}
  }
});

const is_gaojingshow = ref(true);
// 禁选日期
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
const queryData = reactive({
  ...route.query,
});
const detailInfo = ref<anyObj>({});
const newMinAlarmTime = ref("");
const newMaxAlarmTime = ref("");
const newCycleTime = ref("");
const alarmTimeRange = ref<any>([]);
const responseParams = ref({});
const sysShow = ref(false);
const businessParams = ref({});
const businessInfo = ref<anyObj>({});
const alarmOptions = ref([
  { alarmId: "0", name: "所有" },
  { alarmId: "1", name: "失败率告警" },
  { alarmId: "2", name: "响应耗时告警" },
  { alarmId: "3", name: "健康度告警" },
]);
const alarmId = ref("0");
// 表单额外参数
const extendData = reactive<anyObj>({
  ...props.params,
});
// 列表配置
const tableConfig = reactive({
  columns: [
    {
      label: "告警时间",
      prop: "cycleTime",
      formatter: (row: anyObj, val: string) => {
        return val ? val.substring(0, 19) : val;
      },
    },
    {
      label: "总访问量",
      prop: "count",
    },
    {
      label: "告警访问量",
      prop: "alarmCount",
      renderXss: (row: anyObj, val: ApiVal) => {
        return <span style="color: #ff9a0c">{val}</span>;
      },
    },
    {
      label: "响应慢访问量",
      prop: "dealTimeAlarmCount",
    },
    {
      label: "失败访问量",
      prop: "failCount",
      renderXss: (row: anyObj, val: ApiVal) => {
        return <span style="color: #ff5d84">{val}</span>;
      },
    },
    {
      label: "告警指标",
      prop: "alarmIndicatorCode",
      formatter(row: anyObj, val: ApiVal) {
        if (val == "BS_FAIL_RATE_10") {
          return "业务失败率";
        } else if (val == "BS_FAIL_RATE_20") {
          return "响应慢";
        } else {
          return "健康度低";
        }
      },
    },
    {
      label: "告警值",
      prop: "alarmValue",
      formatter: (row: anyObj, val: ApiVal) => {
        return val !== null ? val + "%" : val;
      },
    },
    {
      label: "操作",
      prop: "",
      width: 100,
      operation: [
        {
          text: "告警分析",
          handler: (scope: anyObj) => getAlarmDetail(scope.row),
        },
      ],
    },
  ],
  pagination: {
    pageSize: 10,
    pageNum: 1,
    total: 0,
  },
  loading: true,
  alarmType: true,
});
// 列表数据
const tableData = ref([]);
const searchData = reactive<anyObj>({});
// 表单额外参数
const extendData1: anyObj = reactive({
  pageSize: 10,
  pageNum: 1,
});
// 列表配置
const tableConfig1 = reactive({
  columns: [
    {
      label: "业务名称",
      prop: "businessName",
    },
    {
      label: "自定义返回码",
      prop: "customResCode",
      width: 120,
      formatter(row: anyObj, val: ApiVal) {
        if (!val || val === "") {
          return "-";
        }
        return val;
      },
    },
    {
      label: "用户标识",
      prop: "userIdentify",
    },
    {
      label: "开始时间",
      prop: "startTime",
      sortable: true,
    },
    {
      label: "结束时间",
      prop: "endTime",
      sortable: true,
    },
    {
      label: "业务状态",
      prop: "dealState",
      width: 100,
    },
    {
      label: "完整性",
      prop: "completionState",
      width: 80,
    },
    {
      label: "办理时长",
      prop: "dealTime",
      sortable: true,
      formatter: (row: anyObj, val: ApiVal) => {
        return toDecimalFormate(val, "wm");
      }
    },
    {
      label: "客户端空闲时长",
      prop: "clientFreeTime",
      sortable: true,
    },

    {
      label: "告警数",
      prop: "alarmCount",
      sortable: true,
      width: 100,
    },
    {
      label: "操作",
      prop: "",
      width: 100,
      operation: [
        {
          text: "明细",
          handler: (scope: anyObj) => jump(scope.row),
        },
      ],
    },
  ],
  pagination: {
    pageSize: 10,
    pageNum: 1,
    total: 0,
  },
  loading: true,
  alarmType: true,
});
// 列表数据
const tableData1 = ref([]);
const tableConfig1Type = ref("");
const searchData1 = ref<anyObj>({});
const alarmIndicatorCodes = ref<any[]>([]);
// 导出按钮
const exportLoading = reactive({
  allSys: false,
  allBusi: false,
  relatAlarm: false,
  allBusi1: false,
});
const businesssRef = ref<any>();

watch(() => alarmTimeRange, val => {
  handlerDetailSearch();
}, { deep: true });

// 告警详情总览
function getDetail() {
  const formData: anyObj = {};
  formData.id = queryData.id;
  formData.cycleTime = queryData.cycleTime;
  queryDetail(formData).then((res: ApiResponse) => {
    if (res.code == 0) {
      detailInfo.value = res.data;
      if (detailInfo.value.minAlarmTime != null) {
        newMinAlarmTime.value = detailInfo.value.minAlarmTime.substr(0, 19);
      }
      if (detailInfo.value.maxAlarmTime != null) {
        newMaxAlarmTime.value = detailInfo.value.maxAlarmTime.substr(0, 19);
      }
      if (detailInfo.value.cycleTime != null) {
        newCycleTime.value = detailInfo.value.cycleTime.substr(0, 19);
      }
      if (detailInfo.value.alarmType==2){
          alarmTimeRange.value = [detailInfo.value.startCycleTime, newCycleTime.value];
      }else{
          alarmTimeRange.value = [newCycleTime.value, newCycleTime.value];
      }
      responseParams.value = {
        areaCode: detailInfo.value.areaCode,
        cycleTime: newCycleTime.value,
        startTime: newMinAlarmTime.value,
        endTime: newCycleTime.value,
        startCycleTime: detailInfo.value.startCycleTime,
        alarmType: detailInfo.value.alarmType,
      };
      sysShow.value = true;
    }
  });
}

//获取全系统总览单条数据
function getSysInfo(obj: anyObj) {
  businessParams.value = {
    areaCode: obj.areaCode,
    systemId: obj.systemId,
    cycleTime: newCycleTime.value,
    startTime: newMinAlarmTime.value,
    endTime: newCycleTime.value,
    startCycleTime: detailInfo.value.startCycleTime,
    alarmType: detailInfo.value.alarmType,
  };
  businesssRef.value.reloadList(businessParams.value); //重新加载 业务列表
}

//获取全业务总览单条数据
function getBusinessInfo(obj: anyObj) {
  if (obj.type == 3 || obj.type == undefined) {
    searchData.businessCode = obj.businessCode;
    searchData.systemId = obj.systemId;
    businessInfo.value = obj;
    is_gaojingshow.value = true;

    handlerSearch();
  } else {
    tableConfig1Type.value = obj.type;
    is_gaojingshow.value = false;
    searchData1.value = obj;
    businessInfo.value = obj;
    handlerSearch1();
  }
}

function handlerSearch1() {
  const formData = extendData1;
  tableConfig1.loading = true;
  tableData1.value = [];
  formData.systemId = searchData1.value.systemId;
  formData.businessCode = searchData1.value.businessCode;
  formData.areaCode = searchData1.value.areaCode;
  formData.cycleTime = searchData1.value.cycleTime;
  formData.visitCountType = tableConfig1Type.value;
  formData.startCycleTime = detailInfo.value.startCycleTime;
  formData.alarmType = detailInfo.value.alarmType;

  alarmTypeToBusinessList(formData).then((res: ApiResponse) => {
    tableConfig1.loading = false;
    if (res.code == 0) {
      tableData1.value = res.data.data;
      tableConfig1.pagination.total = res.data.total;
    } else {
      proxy.$modal.msgError(res.msg);
      tableData1.value = [];
      tableConfig1.pagination.total = 0;
    }
  });
}

// 全业务
function handleBusiExport1() {
  exportLoading.allBusi1 = true;
  const d = extendData1;
  d.areaName = detailInfo.value.areaName;
  d.systemName = businessInfo.value.systemName;
  d.businessName = businessInfo.value.businessName;
  d.systemId = searchData1.value.systemId;
  d.businessCode = searchData1.value.businessCode;
  d.areaCode = searchData1.value.areaCode;
  d.cycleTime = searchData1.value.cycleTime;
  d.visitCountType = tableConfig1Type.value;
  d.visitCountTypeName = tableConfig1Type.value == "1" ? "失败数" : "告警数";
  const typeName = tableConfig1Type.value == "1" ? "失败" : "告警";
  alarmTypeToBusinessListExport(d).then((res) => {
    downloadFromBlob(res, "", typeName + "详单列表" + d.cycleTime.replace(/\D/g, "") + ".xlsx").then((o) => {
      exportLoading.allBusi1 = false;
      if (!o.flag) {
        proxy.$modal.msgWarning(o.msg);
      }
    });
  });
}

function jump(obj: anyObj) {
  router.push({
    path: "/ops-workbench/historicalAlarmQuery/businessDetail/business_detail",
    query: {
      businessDetailId: obj.id,
      startTime: obj.startTime,
      startTimeUsec: obj.startTimeUsec,
      endTime: obj.endTime,
      endTimeUsec: obj.endTimeUsec,
    },
  });
}

// 关联告警列表--时间范围
function handlerDetailSearch() {
  if (alarmTimeRange.value.length == 0) {
    searchData.startTime = formatDate(new Date()).substr(0, 10) + " 00:00:00";
    searchData.endTime = formatDate(new Date());
  } else {
    searchData.startTime = formatDate(alarmTimeRange.value[0]);
    searchData.endTime = formatDate(alarmTimeRange.value[1]);
  }
  tableData.value = [];
  tableConfig.pagination.total = 0;
  handlerSearch();
}
//切换告警分类统计
function handleSearchAlarm(value: string) {
  alarmId.value = value;
  tableData.value = [];
  tableConfig.pagination.total = 0;
  switch (value) {
    case "0":
      alarmIndicatorCodes.value = [];
      alarmDetailListQuery();
      break;
    case "1":
      alarmIndicatorCodes.value = ["BS_FAIL_RATE_10"];
      alarmDetailListQuery();
      break;
    case "2":
      alarmIndicatorCodes.value = ["BS_FAIL_RATE_20"];
      alarmDetailListQuery();
      break;
    case "3":
      alarmIndicatorCodes.value = ["BS_FAIL_RATE_30"];
      alarmDetailListQuery();
      break;
  }
}
// 关联告警列表--告警指标类型
function handlerSearch() {
  switch (alarmId.value) {
    case "0":
      alarmIndicatorCodes.value = [];
      alarmDetailListQuery();
      break;
    case "1":
      alarmIndicatorCodes.value = ["BS_FAIL_RATE_10"];
      alarmDetailListQuery();
      break;
    case "2":
      alarmIndicatorCodes.value = ["BS_FAIL_RATE_20"];
      alarmDetailListQuery();
      break;
    case "3":
      alarmIndicatorCodes.value = ["BS_FAIL_RATE_30"];
      alarmDetailListQuery();
      break;
  }
}

// 所有搜索
function alarmDetailListQuery() {
  const formData = extendData;
  tableConfig.loading = true;
  tableData.value = [];
  formData.systemId = searchData.systemId;
  formData.businessCode = searchData.businessCode;
  formData.startTime = alarmTimeRange.value[0];
  formData.endTime = alarmTimeRange.value[1];
  formData.alarmIndicatorCodes = alarmIndicatorCodes.value;
  queryAlarmDetailList(formData).then((res: ApiResponse) => {
    tableConfig.loading = false;
    if (res.code == 0) {
      tableData.value = res.data.data;
      tableConfig.pagination.total = res.data.total;
    } else {
      proxy.$modal.msgError(res.msg);
      tableData.value = [];
      tableConfig.pagination.total = 0;
    }
  });
}

// 告警分析跳转
function getAlarmDetail(obj: anyObj) {
  switch (obj.alarmIndicatorCode) {
    case "BS_FAIL_RATE_10":
      obj.titleName = businessInfo.value.systemName + "-" + businessInfo.value.businessName + "-失败率业务告警分析";
      obj.trendId = "2";
      obj.areaId = "2";
      break;
    case "BS_FAIL_RATE_20":
      obj.titleName = businessInfo.value.systemName + "-" + businessInfo.value.businessName + "-响应慢业务告警分析";
      obj.trendId = "1";
      obj.areaId = "1";
      break;
    case "BS_FAIL_RATE_30":
      obj.titleName = businessInfo.value.systemName + "-" + businessInfo.value.businessName + "-健康度低业务告警分析";
      obj.trendId = "3";
      obj.areaId = "3";
      break;
  }

  obj.systemId = searchData.systemId;
  obj.systemName = businessInfo.value.systemName;
  obj.businessCode = searchData.businessCode;
  obj.businessName = businessInfo.value.businessName;
  obj.startTime = obj.cycleTime;
  router.push({
    path: "/ops-workbench/business-alarm-analysis/index",
    query: {
      ...obj
    },
  });
}

/** 导出 */
// 全系统
function handleSysExport() {
  exportLoading.allSys = true;
  const d = JSON.parse(JSON.stringify(responseParams.value));
  d.areaName = detailInfo.value.areaName;
  exportSystemOverview(d).then((res) => {
    downloadFromBlob(res, "", "健康度低告警分析" + d.cycleTime.replace(/\D/g, "") + ".xlsx").then((o) => {
      exportLoading.allSys = false;
      if (!o.flag) {
        proxy.$modal.msgWarning(o.msg);
      }
    });
  });
}
// 全业务
function handleBusiExport() {
  exportLoading.allBusi = true;
  const d = JSON.parse(JSON.stringify(businessParams.value));
  d.areaName = detailInfo.value.areaName;
  d.systemName = businessInfo.value.systemName;
  exportBusiOverview(d).then((res) => {
    downloadFromBlob(res, "", "健康度低告警分析" + d.cycleTime.replace(/\D/g, "") + ".xlsx").then((o) => {
      exportLoading.allBusi = false;
      if (!o.flag) {
        proxy.$modal.msgWarning(o.msg);
      }
    });
  });
}
// 关联告警
function handleRelatExport() {
  exportLoading.relatAlarm = true;
  const d = JSON.parse(JSON.stringify(searchData));
  d.areaName = detailInfo.value.areaName;
  d.systemName = businessInfo.value.systemName;
  d.businessName = businessInfo.value.businessName;
  d.startTime = alarmTimeRange.value[0];
  d.endTime = alarmTimeRange.value[1];
  switch (alarmId.value) {
    case "0":
      d.alarmIndicatorName = "所有告警";
      alarmDetailListQueryExport(d).then((res) => {
        downloadFromBlob(res, "", d.alarmIndicatorName + "分析 " + d.startTime.replace(/\D/g, "") + "-" + d.endTime.replace(/\D/g, "") + ".xlsx").then((o) => {
          exportLoading.relatAlarm = false;
          if (!o.flag) {
            proxy.$modal.msgWarning(o.msg);
          }
        });
      });
      break;
    case "1":
      d.alarmIndicatorName = "失败率高告警";
      d.alarmIndicatorCodes = ["BS_FAIL_RATE_10"];
      alarmDetailListQueryExport(d).then((res) => {
        downloadFromBlob(
          res,
          "",
          d.alarmIndicatorName +
            "分析 " +
            d.startTime.replace(/\D/g, "") +
            "-" +
            d.endTime.replace(/\D/g, "") +
            ".xlsx"
        ).then((o) => {
          exportLoading.relatAlarm = false;
          if (!o.flag) {
            proxy.$modal.msgWarning(o.msg);
          }
        });
      });
      break;
    case "2":
      d.alarmIndicatorName = "响应慢告警";
      d.alarmIndicatorCodes = ["BS_FAIL_RATE_20"];
      alarmDetailListQueryExport(d).then((res) => {
        downloadFromBlob(
          res,
          "",
          d.alarmIndicatorName +
            "分析 " +
            d.startTime.replace(/\D/g, "") +
            "-" +
            d.endTime.replace(/\D/g, "") +
            ".xlsx"
        ).then((o) => {
          exportLoading.relatAlarm = false;
          if (!o.flag) {
            proxy.$modal.msgWarning(o.msg);
          }
        });
      });
      break;
    case "3":
      d.alarmIndicatorName = "健康度低告警";
      d.alarmIndicatorCodes = ["BS_FAIL_RATE_30"];
      alarmDetailListQueryExport(d).then((res) => {
        downloadFromBlob(res, "", d.alarmIndicatorName + "分析 " + d.startTime.replace(/\D/g, "") + "-" + d.endTime.replace(/\D/g, "") + ".xlsx").then((o) => {
          exportLoading.relatAlarm = false;
          if (!o.flag) {
            proxy.$modal.msgWarning(o.msg);
          }
        });
      });
      break;
  }
}

getDetail();
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@mixin box-back {
  background-color: #2a507d;
  border-radius: 10px;
}
.table-title {
  height: 40px;
  width: 100%;
  font-size: 15px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  .table-export-btn {
    flex: 1;
    text-align: right;
    margin-right: 20px;
  }
}
.ywgzt-container {
  width: 100%;
  min-height: calc(100vh) !important;
  .overview-box {
    width: 100%;
    padding: 15px 40px;
    border: 2px solid #2beded;
    .overview-label {
      font-size: 14px;
      font-weight: bold;
      color: #2beded;
    }
  }
  .table-box {
    @include box-back;
    margin-top: 10px;
  }
}
.active-domain {
  width: 100px;
  padding: 5px;
  margin-right: 8px;
  color: #ffffff;
  background-color: #1c2b5d;
  border-radius: 5px;
}
.unActive-domain {
  width: 100px;
  padding: 5px;
  margin-right: 8px;
  color: #cacad1;
  background-color: #626c88;
  border-radius: 5px;
}

.analysis-time-box {
  height: 30px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  .analysis-time-label {
    font-size: 14px;
    margin-right: 8px;
  }
  .date-picker {
    margin: 0 10px;
    height: 26px;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    :deep(.el-range-input) {
      background-color: rgba(255, 255, 255, 0);
      color: #ffffff;
    }
    :deep(.el-range-separator) {
      color: #ffffff;
    }
  }
}
.searchTitle {
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.icon-cls {
  width: 20px;
  height: 20px;
  color: #00ffff;
}
</style>
